<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Mail Archive Navigator</title>
        <link rel="stylesheet" href="css/normalize.css">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/blitzer/jquery-ui-1.10.4.custom.min.css">
        <link rel="stylesheet" href="css/jquery.sidr.dark.css">
        <script src="js/jquery.js"></script>
        <script src="js/jquery.sidr.min.js"></script>
        <script src="js/jquery-ui-1.10.4.custom.min.js"></script>
        <script src="js/scripts.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $( "#from" ).datepicker({
                  defaultDate: "+1w",
                  changeMonth: true,
                  changeYear: true,
                  numberOfMonths: 2,
                  dateFormat : "dd-mm-yy",
                  onClose: function( selectedDate ) {
                    $( "#to" ).datepicker( "option", "minDate", selectedDate );
                    //console.log($( "#to" ).val()); // how to get value
                  }
                });
                $( "#to" ).datepicker({
                  defaultDate: "+1w",
                  changeMonth: true,
                  changeYear: true,
                  numberOfMonths: 2,
                  dateFormat : "dd-mm-yy",
                  onClose: function( selectedDate ) {
                    $( "#from" ).datepicker( "option", "maxDate", selectedDate );
                    //console.log($( "#from" ).val()); // how to get value
                  }
                });
                //console.log($( "#keywordfrom" ).val()); // how to get value
            });
        </script>
    </head>
    <body onload="loadHome();">
        <div>
            <div id="header">
                <div id="htitle">Mail Archive Navigator</div>
                <div id="hname"></div>
            </div>
            <div id="center">
                <div id="keyworderror" class="errpane"><image src="error.png"/><div class="msg">Please enter a valid keyword query</div></div>
                <div id="optionserror" class="errpane"><image src="error.png"/><div class="msg">Please choose at least one filtering method</div></div>
                <div id="filters">
                    <div class="filter-content" >
                        <form class="form-wrapper cf">
                            <label class="lable-filter-box" for="from">Keyword:</label>
                            <input id="keywordform" type="text" placeholder="Search here by keyword..." required />
                            <!--    <button onsubmit="filterByDate();">Search</button>  -->
                            <div class="tickbox-desc-left" style="clear: left;">Sender:</div>
                            <input id="senderbox" class="checkbox-style" type="checkbox" />
                            <div class="tickbox-desc-left">Content:</div>
                            <input id="contentbox" class="checkbox-style" type="checkbox" />
                            <div class="tickbox-desc-left">Subject:</div>
                            <input id="subjectbox" class="checkbox-style" type="checkbox" />
                            <div class="tickbox-desc-left">Date:</div>
                            <input id="timebox" class="checkbox-style" type="checkbox" />
                        </form>  
                        <form class="form-wrapper cf input-date">
                            <label class="lable-filter-box" for="from">Date:</label>
                            <input class="input-selectdate" type="text" id="from" name="from" placeholder="Pick date" required />
                            <label class="lable-selectdate" for="to">to</label>
                            <input class="input-date-to" type="text" id="to" name="to" placeholder="(optional)" />
                        </form> 
                        <input class=" searchbutton" type="button" value="Search" onclick="search();">
                        <input class=" searchbutton" type="button" value="Reset" onclick="resetFilter();">
                    </div>
               </div>
                <div class="form-wrapper-clear"></div>
                <div id="mails"></div>
            </div>
            <div id="footer"></div>
        </div>
    </body>
</html>
